<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale:1.0">
  <title>儿童言语发展</title>
  <link rel="stylesheet" type="text/css" href="../font-icon/iconfont.css">
  <link rel="stylesheet" type="text/css" href="../swiper/swiper-bundle.min.css">
  <link rel="stylesheet" type="text/css" href="../container/Header.css">
  <style>
    body {
      --font: 100%;
      padding: 0;
      margin: 0;
      font-size: 14px;
    }
    a
    {
      text-decoration: none;
    }
    .navcon
    {
      display:flex;
      /*margin-top:38px;*/
      justify-content: space-between;
    }
    .navcon a
    {
      padding:10px;
      text-align: center;
      flex:calc(100% / 4);
      color:#666666;
      font-size: 12px;
    }
    .navcon a:nth-of-type(1)
    {
      padding:10px;
      text-align: center;
      flex:calc(100% / 4);
      background-color: #eeeeee;
      color:#666666;
      font-size: 12px;
    }
    .bottom
    {
     border-bottom: 1px solid #eeeeee;
      padding:30px 20px;
    }
    .bottom:nth-last-of-type(1)
    {
      margin-bottom: 50px;
    }
    .font
    {
      margin-bottom: 10px;
      font-size: 18px;
    }
    .flexx
    {
      display:flex;
      justify-content: space-between;
    }
    .flexx p
    {
      margin-left: 20px;
      width: 208px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .flexx img
    {
      box-shadow: 0 0 5px 0 #e3e2e2;
    }
    .itimg
    {
      width:100%;
      height: 130px;
      margin-top: 45px;
    }
    .white-1
    {
      top:38px;
    }
    .yuedu
    {
      color: #3399ff;
      text-align: right;
    }
    *
    {
      padding:0;
      margin:0;
      box-sizing: border-box;
    }



  </style>
</head>
<body>
<section></section>
<ul class="white-1">
</ul>

<script src="../waibujs/header.js"></script>
<div class="container">
  <img class="itimg" src="http://w3.dfqy.com/Uploads/Picture/2017-06-02/5930d0a84ed60.png">
  <div class="navcon"></div>
</div>
<script src="../waibujs/foot.js"></script>

<script src="../waibujs/xiala.js"></script><!--下拉菜单-->
<script src="../waibujs/xinxi.js"></script><!--首页-->

<script>
  var xml=new XMLHttpRequest();
  var divnav=document.querySelector('.navcon')
  var con=document.querySelector('.container')
  var arr=[];
  var fw=['../href/etyyfz.html','../href/etyyfw.html','../href/cryyfw.html','../href/fw.html']
  xml.open('get','http://47.116.75.38:8101/web/home/page/serviceClass');
  xml.send()
  xml.onload = function()
  {
    var nav=JSON.parse(xml.response).data;
    nav.forEach(function (item,index) {
      var a=document.createElement('a');
      a.className='red'
      a.href=fw[index]
      var div1=document.createElement('div');
      div1.innerText=item.typeVo.dictName;
      a.appendChild(div1)
      divnav.appendChild(a)
      var kkf=item.list
      arr.push(kkf)
    })
    for(var i=0;i<1;i++)
    {
      for(var k=0;k<arr[i].length;k++)
      {
        var kkf=document.createElement('div');
        var ppkf=document.createElement('p');
        ppkf.className='font'
        ppkf.innerText=arr[i][k].dictLabel
        var kkf2=document.createElement('div')
        var imgkf=document.createElement('img')
        imgkf.src=arr[i][k].picUrl
        var kkf3=document.createElement('div')
        var ppkf2=document.createElement('p')
        ppkf2.innerText=arr[i][k].dictType
        kkf3.appendChild(ppkf2)
        kkf2.appendChild(imgkf)
        var kkf4=document.createElement('div')
        kkf4.className='mar'
        kkf4.className='flexx'
        kkf4.appendChild(kkf2)
        kkf4.appendChild(kkf3)
        var kkf5=document.createElement('p')
        kkf5.className='yuedu'
        kkf5.innerText='阅读更多'
        kkf.appendChild(ppkf)
        kkf.appendChild(kkf4)
        kkf.appendChild(kkf5)
        kkf.className='bottom'
        con.appendChild(kkf)
        console.log(kkf)
      }
    }
  }
</script>
</body>
</html>